<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <ul class="notice-list-box">
                <li v-for="(item,index) in noticeList" :key="index"
                    class="block-box"
                >
                    <div class="notice-title-box">
                        <div class="main-color">{{item.title}}</div>
                        <div class="small-font-size second-color">{{item.time}}</div>
                    </div>
                    <div class="three-color big-font-size notice-des">{{item.des}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

    export default {
        name: "StaffCreate",
        data() {
            return {
                id: '',
                GetWindowBackground: {
                    'min-height': ''
                },
                noticeList: [
                    {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }, {
                        title: '报损单审核',
                        time: '2021:05:11 12:12:12',
                        des: '这里是通知的内容，比如说，谁谁谁该审批啦这里是通知的内容，比如说，谁谁谁该审批啦'
                    }
                ]

            }
        },
        methods: {
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>

    .block-box{
        padding: 20px 20px 10px 20px;
    }
    .notice-list-box {
        li {
            border-radius: 6px;
            .notice-title-box{
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            .notice-des{
                width: 100%;
                text-align: left;
                padding: 10px 0;
            }
            .main-color{
                font-size: 16px;
            }
        }
    }


</style>